<template>
    <div class="scan-page">
      <!-- 病虫害扫描区域 -->
      <div class="recognition-container">
        <el-card class="scan-section">
          <h2>病虫害扫描</h2>
          <video ref="cropVideo" width="100%" height="100px" autoplay></video>
          <!-- 修改视频高度 -->
          <button @click="openCropCamera">打开摄像头</button>
          <button @click="closeCropCamera">关闭摄像头</button>
          <button class="capture-button" :disabled="!isCameraOpen" @click="captureImage">拍摄照片</button>
          <button class="upload-button">
            上传图片
            <input type="file" id="file-input" accept="image/*" @change="handleImageUpload"/>
          </button>
          <p v-if="uploadStatus === 'success'" class="success-text">上传成功</p>
          <p v-if="uploadStatus === 'failure'" class="error-text">上传失败</p>
        </el-card>
      </div>
  
      <!-- 常见病害新闻列表 -->
      <div class="news-section" style="margin-top: 10px;">
        <h3>常见病虫害</h3>
        <NewsItem v-for="news in newsList" :key="news.id" :news="news" @click="navigateToNewsDetail(news.id)"/>
      </div>
  
      <!-- 底部导航 -->
      <BottomNav/>
    </div>
  </template>
  
  <script>
import BottomNav from '/src/views/BottomNav.vue';
import NewsItem from '/src/views/NewsItem.vue';

export default {
  name: 'ScanPage',
  components: { BottomNav, NewsItem },
  data() {
    return {
      cropVideoStream: '', // 摄像头流
      uploadStatus: '', // 上传状态 ('success' 或 'failure')
      isCameraOpen: false, // 摄像头是否打开
      capturedImage: '', // 捕获的图片数据
      newsList: [
        {
          id: 1,
          title: '草地贪夜蛾：对玉米、水稻等作物造成严重危害',
          views: '8090',
          date: '2020-12-03',
          image: 'src/assets/images/start-page/haichong1.jpg',
          content: '草地贪夜蛾是属于鳞翅目Lepidoptera夜蛾科Noctuidae灰翅夜蛾属Spodoptera，又叫伪黏虫、秋行军虫、秋粘虫、草地夜蛾，是原产于北美洲和南美洲的杂食性农业害虫。2016年尼日利亚和加纳首次发现，2020年蔓延至大洋洲的澳大利亚。目前，草地贪夜蛾的发生已横跨美洲、非洲、亚洲和大洋洲，成为世界性的迁飞害虫。2019年1月在我国云南省江城县首次发现以来，现已在云南、贵州、四川、江苏、浙江等28个省（直辖市、自治区）发生危害。2021年被列入我国一类农作物病虫害名录。\n' +
            '\n草地贪夜蛾具有寄主范围广、种类多样性、食量大、产卵多、迁飞远、为害快、易暴发的生物学特性，属于多食性害虫，其寄主范围为76科350多种，包括玉米、甜玉米、小麦、大麦、荞麦、燕麦、水稻、大豆、花生、棉花、甜菜等，还可为害苹果、葡萄、桃子、草莓以及一些花卉等。它主要通过迁徙和携带虫源，一只成虫一夜之间能迁徙100公里，一个世代向周围扩散迁徙500公里，传播速度非常快。成虫飞翔能力强，还可随货物和交通工具的缝隙处等进行远距离传播。\n' +
            '\n草地贪夜蛾以幼虫危害为主，危害症状与黏虫相似。幼虫先取食卵壳，然后开始分散。1～2龄幼虫有吐丝下坠的习性，借助风转移到周边植株上，在田间形成聚集型分布。在玉米上，低龄幼虫（1～3龄）通常隐藏在叶片背面取食，取食叶片单侧表皮和叶肉，留下上表皮，形成半透明薄膜“窗孔”。幼虫3龄前危害隐蔽性强，容易被忽视。4龄后进入暴食期，取食叶片形成不规则的长形孔洞、缺刻。高龄幼虫（4~6龄）常隐藏在玉米心叶中取食心叶，可造成玉米生长点死亡，俗称“心死”。高龄幼虫还钻蛀茎杆，取食玉米雄穗和雌穗。苗期干旱时，幼虫钻蛀幼苗基部，造成幼苗死亡，缺苗断垄。苗期发生严重时，草地贪夜蛾可吃光整株玉米的叶片，仅剩光杆，可导致毁种，造成严重减产。\n' +
            '\n目前主要的检疫措施与防治方法有：\n' +
            '\n1、检疫措施：\n' +
            '\n（1）加强监测预警。在迁飞通道设立重点监测点，安装灯诱、性诱等监测设备，及时监测成虫迁飞数量和动态。主要寄主作物（玉米、甘蔗、高粱和小麦等）生长季节，特别是苗期和心叶期，针对卵、幼虫和蛹，及时开展系统调查和大田普查，确保早发现、早控制。\n' +
            '\n（2）推进统防统治。在规模化种植区域，以专业化统防统治服务组织为主体，以新型农业经营主体为补充，组建培育应急防治队伍，配备高效施药器械和安全防护用品，加大统防统治、联防联控，提高防控效果。\n' +
            '\n2、防治方法\n' +
            '\n（1）化学防治。抓住幼虫低龄期，对虫口密度高、集中连片发生区域，实施统防统治和联防联控；对分散发生区实施重点挑治和点杀点治。农业农村部推荐化学药剂有氯虫苯甲酰胺、溴氰虫酰胺等。在清晨或者傍晚，喷洒在玉米心叶、雄穗和雌穗等部位。防治药剂需交替使用、轮换使用、安全使用，延缓抗药性产生。\n' +
            '\n（2）生物防治。采用球孢白僵菌、绿僵菌、甘蓝夜蛾核型多角体病毒、苏云金杆菌等生物制剂早期预防幼虫，保护利用夜蛾黑卵蜂、半闭弯尾姬蜂、淡足侧沟茧蜂等寄生性天敌和益蝽、东亚小花蝽、大草蛉和瓢虫等捕食性天敌，持续控制草地贪夜蛾种群数量。\n' +
            '\n（3）成虫诱杀。在成虫发生高峰期，采取高空诱虫灯、性诱捕器以及食物诱杀等理化诱控措施，诱杀成虫、干扰交配，减少田间落卵量，压低发生基数，减轻危害损失。\n' +
            '\n（4）农业防治。选择抗虫性较强的品种。调整播种时间。种植应避开贪夜蛾流行时期，在玉米抵抗力较强时期播种。采用间套种植模式，轮作趋避植物，或者间套种植非禾本科农作物，或者通过种植天敌植物形成生态阻隔带，严格控制贪夜蛾的繁殖，降低对玉米的危害程度。\n' +
            '\n自2019年5月24日农业农村部召开全国草地贪夜蛾防控工作视频会议后，盐城市农业部门高度重视，对草地贪夜蛾的监测与防控工作做了紧急布置，在全市设立智能监测站点，印发《草地贪夜蛾识别与应急防治技术挂图》。植保技术人员每年对草地贪夜蛾进行重点监测与防控。目前，草地贪夜蛾未在盐城市造成农作物大面积危害。'
        },
        {
          id: 2,
          title: '稻飞虱：通过吸食稻株汁液，导致水稻生长受阻，严重时造成减产。',
          views: '32560',
          date: '2020-12-03',
          image: 'src/assets/images/start-page/haichong2.jpg',
          content: '稻飞虱是一种常见的害虫，主要吸食水稻的汁液。长期吸食会削弱植株生长，降低产量，严重时导致枯心病，植株死亡。'
        },
        {
          id: 3,
          title: '棉铃虫：主要危害棉花，影响产量和质量。',
          views: '8090',
          date: '2020-12-03',
          image: 'src/assets/images/start-page/haichong3.jpg',
          content: '棉铃虫是一种重要的棉花害虫，以幼虫阶段为害棉花的蕾、花、铃等部位，造成大量落蕾、落铃，影响棉花的产量和纤维质量。'
        },
      ],
    };
  },
  methods: {
    navigateToNewsDetail(id) {
      this.$router.push({ name: 'NewsDetail', params: { id: id }, query: { newsList: JSON.stringify(this.newsList) } });
    },
    openCropCamera() {
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices
          .getUserMedia({ video: true })
          .then((stream) => {
            this.cropVideoStream = stream;
            this.$refs.cropVideo.srcObject = stream; // 修改为srcObject
            this.$refs.cropVideo.play();
            this.isCameraOpen = true;
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        alert('摄像头不可用');
      }
    },
    closeCropCamera() {
      if (this.cropVideoStream) {
        this.cropVideoStream.getTracks()[0].stop();
        this.$refs.cropVideo.srcObject = null; // 修改为srcObject
        this.isCameraOpen = false;
      }
    },
    captureImage() {
      if (!this.isCameraOpen) {
        alert('请先打开摄像头');
        return;
      }
      const canvas = document.createElement('canvas');
      canvas.width = this.$refs.cropVideo.videoWidth;
      canvas.height = this.$refs.cropVideo.videoHeight;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(this.$refs.cropVideo, 0, 0, canvas.width, canvas.height);
      const imgData = canvas.toDataURL('image/png');
      this.saveImage(imgData);
    },
    saveImage(imgData) {
      const link = document.createElement('a');
      link.href = imgData;
      link.download = 'captured_image.png';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    handleImageUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = () => {
          // 模拟上传逻辑
          const isSuccess = Math.random() > 0.1; // 模拟上传成功或失败
          if (isSuccess) {
            this.uploadStatus = 'success';
          } else {
            this.uploadStatus = 'failure';
          }
        };
        reader.readAsDataURL(file);
      }
    },
    navigateTo(path) {
      this.$router.push(path);
    },
  },
  beforeDestroy() {
    this.closeCropCamera();
  },
};
</script>

  
  <style scoped>
  .scan-page {
    display: flex;
    flex-direction: column;
    background-color: #f7f7f7;
    min-height: 100vh;
  }
  
  .recognition-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f7f7f7;
    padding-bottom: 20px; /* 减少底部内边距 */
  }
  
  .scan-section {
    width: 90%;
    margin: 10px 0; /* 减少上下间距 */
    text-align: center;
  }
  
  button {
    margin: 5px 0; /* 减少按钮间距 */
    width: 100px;
    height: 40px;
    background-color: #22ccb3;
    border: none;
    color: white;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #159a8d;
  }
  
  .capture-button {
    background-color: #22ccb3;
    border: none;
    color: white;
    cursor: pointer;
  }
  
  .upload-button {
    margin: 5px 0; /* 减少按钮间距 */
    width: 100px;
    height: 40px;
    background-color: #22ccb3;
    border: none;
    color: white;
    cursor: pointer;
    line-height: 40px;
    position: relative;
    overflow: hidden;
  }
  
  .upload-button input[type='file'] {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
  }
  
  .success-text {
    color: green;
    margin-top: 10px;
  }
  
  .error-text {
    color: red;
    margin-top: 10px;
  }
  
  /* 常见病害新闻列表 */
  .news-section {
    padding: 10px;
    background-color: white;
    border-radius: 8px;
    margin: 10px;
  }
  
  .news-section h3 {
    font-size: 16px;
    margin-bottom: 8px;
  }
  </style>
  <p>草地贪夜蛾是属于鳞翅目Lepidoptera夜蛾科Noctuidae灰翅夜蛾属Spodoptera，又叫伪黏虫、秋行军虫、秋粘虫、草地夜蛾，是原产于北美洲和南美洲的杂食性农业害虫。2016年尼日利亚和加纳首次发现，2020年蔓延至大洋洲的澳大利亚。目前，草地贪夜蛾的发生已横跨美洲、非洲、亚洲和大洋洲，成为世界性的迁飞害虫。2019年1月在我国云南省江城县首次发现以来，现已在云南、贵州、四川、江苏、浙江等28个省（直辖市、自治区）发生危害。2021年被列入我国一类农作物病虫害名录。</p>
  
  <p>草地贪夜蛾具有寄主范围广、种类多样性、食量大、产卵多、迁飞远、为害快、易暴发的生物学特性，属于多食性害虫，其寄主范围为76科350多种，包括玉米、甜玉米、小麦、大麦、荞麦、燕麦、水稻、大豆、花生、棉花、甜菜等，还可为害苹果、葡萄、桃子、草莓以及一些花卉等。它主要通过迁徙和携带虫源，一只成虫一夜之间能迁徙100公里，一个世代向周围扩散迁徙500公里，传播速度非常快。成虫飞翔能力强，还可随货物和交通工具的缝隙处等进行远距离传播。</p>

  <p>草地贪夜蛾以幼虫危害为主，危害症状与黏虫相似。幼虫先取食卵壳，然后开始分散。1～2龄幼虫有吐丝下坠的习性，借助风转移到周边植株上，在田间形成聚集型分布。在玉米上，低龄幼虫（1～3龄）通常隐藏在叶片背面取食，取食叶片单侧表皮和叶肉，留下上表皮，形成半透明薄膜“窗孔”。幼虫3龄前危害隐蔽性强，容易被忽视。4龄后进入暴食期，取食叶片形成不规则的长形孔洞、缺刻。高龄幼虫（4~6龄）常隐藏在玉米心叶中取食心叶，可造成玉米生长点死亡，俗称“心死”。高龄幼虫还钻蛀茎杆，取食玉米雄穗和雌穗。苗期干旱时，幼虫钻蛀幼苗基部，造成幼苗死亡，缺苗断垄。苗期发生严重时，草地贪夜蛾可吃光整株玉米的叶片，仅剩光杆，可导致毁种，造成严重减产。</p>

  <h3>目前主要的检疫措施与防治方法有：</h3>
  <h4>1、检疫措施：</h4>
  <ul>
    <li>加强监测预警。在迁飞通道设立重点监测点，安装灯诱、性诱等监测设备，及时监测成虫迁飞数量和动态。主要寄主作物（玉米、甘蔗、高粱和小麦等）生长季节，特别是苗期和心叶期，针对卵、幼虫和蛹，及时开展系统调查和大田普查，确保早发现、早控制。</li>
    <li>推进统防统治。在规模化种植区域，以专业化统防统治服务组织为主体，以新型农业经营主体为补充，组建培育应急防治队伍，配备高效施药器械和安全防护用品，加大统防统治、联防联控，提高防控效果。</li>
  </ul>

  <h4>2、防治方法</h4>
  <ul>
    <li>化学防治。抓住幼虫低龄期，对虫口密度高、集中连片发生区域，实施统防统治和联防联控；对分散发生区实施重点挑治和点杀点治。农业农村部推荐化学药剂有氯虫苯甲酰胺、溴氰虫酰胺等。在清晨或者傍晚，喷洒在玉米心叶、雄穗和雌穗等部位。防治药剂需交替使用、轮换使用、安全使用，延缓抗药性产生。</li>
    <li>生物防治。采用球孢白僵菌、绿僵菌、甘蓝夜蛾核型多角体病毒、苏云金杆菌等生物制剂早期预防幼虫，保护利用夜蛾黑卵蜂、半闭弯尾姬蜂、淡足侧沟茧蜂等寄生性天敌和益蝽、东亚小花蝽、大草蛉和瓢虫等捕食性天敌，持续控制草地贪夜蛾种群数量。</li>
    <li>成虫诱杀。在成虫发生高峰期，采取高空诱虫灯、性诱捕器以及食物诱杀等理化诱控措施，诱杀成虫、干扰交配，减少田间落卵量，压低发生基数，减轻危害损失。</li>
    <li>农业防治。选择抗虫性较强的品种。调整播种时间。种植应避开贪夜蛾流行时期，在玉米抵抗力较强时期播种。采用间套种植模式，轮作趋避植物，或者间套种植非禾本科农作物，或者通过种植天敌植物形成生态阻隔带，严格控制贪夜蛾的繁殖，降低对玉米的危害程度。</li>
  </ul>

  <p>自2019年5月24日农业农村部召开全国草地贪夜蛾防控工作视频会议后，盐城市农业部门高度重视，对草地贪夜蛾的监测与防控工作做了紧急布置，在全市设立智能监测站点，印发《草地贪夜蛾识别与应急防治技术挂图》。植保技术人员每年对草地贪夜蛾进行重点监测与防控。目前，草地贪夜蛾未在盐城市造成农作物大面积危害。</p>